<template>
  <div>
    <div>
      <div style="padding: 10px;margin-top: 30px">
        <div class="grid-content bg-purple-light" style="text-align: left">
          <el-button @click="OpenDialog =true" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">新增</el-button>
          <div  style="text-align: left">
            <el-dialog title="新增环境" :visible.sync="OpenDialog" style="width: 850px;left: 18%" :close-on-click-modal="false" >
              <el-form v-model="Envform"   class="demo-ruleForm" style="text-align: right">
                <el-form-item label="名称:"  prop="env_declare">
                  <el-input style="width:300px" type="text" v-model="Envform.env_declare" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="IP地址:"  prop="env_addr">
                  <el-input style="width:300px" type="ipaddr" v-model="Envform.env_addr" autocomplete="off"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeForm">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog title="编辑环境" :visible.sync="EditDialog" style="width: 850px;left: 18%" :close-on-click-modal="false" >
              <el-form v-model="Envform"   class="demo-ruleForm" style="text-align: right">
                <el-form-item label="名称:"  prop="env_declare">
                  <el-input style="width:300px" type="text" v-model="Envform.env_declare" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="IP地址:"  prop="env_addr">
                  <el-input style="width:300px" type="ipaddr" v-model="Envform.env_addr" autocomplete="off"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeForm">取 消</el-button>
                <el-button type="primary" @click="Update">确 定</el-button>
              </div>
            </el-dialog>

          </div>
        </div>
      </div>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 70%"
        border
        v-model="multipleSelection"
        >
        <el-table-column prop="env_id" label="ID"  width="80">
        </el-table-column>
        <el-table-column prop="env_declare" label="名称" width="300">
        </el-table-column>
        <el-table-column prop="env_addr" label="地址" style="max-width: 700px">
        </el-table-column>
        <el-table-column prop="used" label="是否启用"  width="100">
        </el-table-column>
        <el-table-column width="300">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">启用/停用</el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>
  </div>

</template>

<style>
  .el-table{
    text-align: center;
  }
</style>

<script >

  export default {
        data() {
            return {
              multipleSelection:[],
              OpenDialog:false,
              EditDialog:false,
              msg: '环境管理',
              tableData:[],
              Envform:{
                env_declare:'',
                env_addr:'',
                env_id:'',
                delete_flag:null,
              },
              multipleTable:[],
            }
        },
      methods: {
        closeForm: function () {
          this.OpenDialog = false;
          this.EditDialog = false;
        },
        addenv: function ()  {this.OpenDialog = true;
          },
        handleEdit(index, row) {
          if (row.delete_flag===1){
            this.$notify({
              message: "请先启用",
              duration: 1000
            })
          }else {
            this.$axios.post("/config/GetEnvById", {
              env_id:row.env_id,
            }).then(Response => {
              console.log(Response.data.data[0].env_addr)
              this.Envform.env_declare = Response.data.data[0].env_declare;
              this.Envform.env_addr = Response.data.data[0].env_addr;
              this.Envform.env_id = Response.data.data[0].env_id;
              this.EditDialog = true;
            })
          }

        },
        handleDelete(index, row) {
          this.$axios.post("/config/DelEnv", {
            env_id:row.env_id,
            delete_flag:row.delete_flag
          }).then(Response => {
            console.log(Response.data)
              this.$notify({
                message: Response.data.mess,
                duration: 2000
              });
            this.flush();
          }).catch(function (error) {
            this.$notify({
              message: error,
              duration: 1000
            })
          })
        },
        submit: function () {
          this.$axios.post("/config/InsertEnv",
            this.Envform
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.mess,
                  duration: 1000
                });
              this.Envform.env_declare="";
              this.Envform.env_addr="";
              this.OpenDialog = false;
            }
          )
        },
        Update: function () {
          this.$axios.post("/config/UpdateEnv",
            this.Envform
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.mess,
                  duration: 1000
                });
              this.Envform.env_declare="";
              this.Envform.env_addr="";
              this.EditDialog = false;
            }
          )
        },
        flush: function () {
          this.$axios.post("/config/EnvList", {}).then(Response => {
            var data = [];
            for (let i = 0; i < Response.data.data.length; i++) {
              var obj = {};
              obj.env_declare = Response.data.data[i].env_declare;
              obj.env_addr = Response.data.data[i].env_addr;
              obj.env_id = Response.data.data[i].env_id;
              obj.delete_flag = Response.data.data[i].delete_flag;
              if (Response.data.data[i].delete_flag ==0){
                obj.used="是";
              }else {obj.used="否";}
              data[i] = obj;
            }
            this.tableData = data;
          })
        },
      },

      created:function () {
        this.flush()
      },
    }

</script>
